Image Panel Control

About the image panel

The image panel is mainly used with images, but may be used with other document file types in a similar way to the document linker. This topic refers to its more common use with images only.

Image panel functions include:

Displaying an image in a web application page. You can set the image in two ways;
1. Using the Browse button on the image panel.
2. Using JavaScript.
Storing an image in a data object. You can also add images directly to a data object manually, and open them in the image panel.
Returning a full data URL for an image displayed in the panel.

Displaying and storing images

An image panel can operate like a document linker with these differences:

An image panel creates a link to one image or document file only; it can be configured to display full-size images , and other file types as icons.
A document linker creates a link to one or more documents; it displays image files as thumbnails, and other file types as icons.

Storing images in a data object: when the page is saved

You create and select a data object to store your images which includes a VARBINARY field where the image data will be stored; this data object must be bound to the web page Layout; see Page binding in Controls and Data Objects.

In the image panel configuration, you set Properties > Data, Data Column, to the VARBINARY field name.

In the image panel configuration you can set Properties > Data, set Type, to Image or document.

When set to image, only valid image file types can be selected in the image panel. Use this setting if you are using the image panel exclusively for images.
When set to document, any file type can be selected.
It is possible to restrict the valid file types in the Allowed file types property for to image or document. These will be the relevant file extensions entered in a comma separated format; for example .jpg,.gif,.png

In use, you browse to and select an image from your environment. When the page is saved, the image panel creates a new row in the data object and stores the selected image. If you examine the VARBINARY field in the data object, you will see the word "download" but not the image data itself which remains hidden.

For an example of using an image panel in this way see Events Diary Tutorial.

Storing images in a data object: using JavaScript code

By saving an image in an image panel to a data object using JavaScript, you can perform additional operations on the image date, such as resizing.

Format of a saved image

<filename>,<type>,<size>,<content>,ImagePanel

where type is 'Base64', size is the length of the base64 image data, content is the base64 image data, and 'ImagePanel' defines an image panel as the source of the image data (rather than the similar Document Linker Control control, which would be defined as 'DocumentLinker').

Example

This example,

returns the full data URL from an image panel (imagepanel-1)using fsi.getById();
extracts the base64 string (base64Image) from the full data URL;
gets the base64 string length;
builds a filename based on the current data and time;
assembles a string (imagePanelValue) to update the data object VARBINARY field;
calls a workflow that updates the VARBINARY field in the current data object row.

function saveImage(){
  var image = fsi.getById('imagepanel-1');
  var imagePanelValue = '';
  var base64Image = image.split(',')[1];
  var length = base64Image.length;
  var imagePanelData = {
    Name: new Date().getTime() + '.png',
    Type: 'Base64',
    Size: length,
    Content: base64Image
  };
  imagePanelValue = imagePanelData.Name + ',' + imagePanelData.Type + ',' + imagePanelData.Size + ',' + imagePanelData.Content + ',ImagePanel';
  var inputs = {};
  var outputs = {};
   inputs.Image = imagePanelValue;
   inputs.Sid = CurrentSystemId;

  fsi.workflow('CreateClassImage', inputs, outputs, null,
  function (responseData) {
    var result = JSON.parse(responseData.myResult).Output;
  },
  function (errorData) { debugger; });
}

A suitable workflow would define input parameters Sid and Image and would execute a query similar to this:

UPDATE [FSI].ImageTable SET [Image]=@Image WHERE [SystemID]=@Sid

Viewing stored images in an image panel

A common method to display the images stored in a data object is to use an image panel and a data list or a grid control. The data list or grid control is configured to display columns from a data object containing images. When you display a data object VARBINARY column containing an image, a data list displays a download link, whereas a grid displays a thumbnail of the image. The tutorial Events Diary Tutorial explains how to use an image panel with a data object and a grid control.

Displaying a fixed image

To display a fixed image in a web app page, a data object isn't required.

In the Page Designer, open the page where you want the image.
Drop an image panel control onto the web application page, select it, and then in Properties > Appearance, change Height and Width to accommodate the image. Alternatively, set the Size parameter to Fit.
To display a fixed image, the Browse button on the image panel is not needed; to remove it, delete the text Browse from the Title field.
In Properties > Data, set Type to Image.
Click the button to browse to the local image file.
Click Open; the selected file is uploaded to the portal.
Click Save Page.

Setting an image in an image panel using JavaScript

You can see a mobile device example here. See also FSI API: Image panel.

Manually adding an image to a data object

You can manually add an image from your computer directly into a data object in exactly the same way as an image panel would; you can then treat them as images stored by an image panel. For details see Managing Data Object Content.

Returning base64 image file data

FSI JavaScript API

With an image selected in an image panel, the FSI JavaScript API method fsi.getById('<control id>') returns a base64 string representing the image.

See FSI API: Image panel.

Workflow node

You can use the workflow node ReadImageDocument to return image file data from a specified data object and row. See ReadImageDocument Node.